<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-05-06 17:07:26
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-05-10 15:32:56
 * @Description: 获取手机号组件
 * @FilePath: \parking-mini\src\components\getPhoneModal.vue
-->
<template>
    <div class="phone-modal-container">
        <u-overlay :show="visible">
            <div class="phone-modal">
                <div class="phone-info">
                    <div class="phone-left">
                        <div class="phone-text1">手机号码未认证</div>
                        <div class="phone-text2">为了保障信息安全，请先进行号码验证</div>
                    </div>
                    <img :src="imgs.warning" alt="" />
                </div>
                <button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键授权手机号</button>
            </div>
        </u-overlay>
    </div>
</template>
<script>
import { getPhoneNumberAPI } from "../api/api";

const app = getApp();
export default {
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            imgs: app.globalData.imgs,
        };
    },
    methods: {
        getPhoneNumber(e) {
            let code = e.detail.code;
            let openId = wx.getStorageSync("parking_openid");
            if (code) {
                wx.showLoading({
                    title: "加载中...",
                });
                getPhoneNumberAPI({
                    code,
                    openId,
                }).then((res) => {
                    wx.setStorageSync("parking_phone", res);
                    wx.hideLoading();
                    this.$emit("success");
                });
            } else {
                this.$emit("close");
            }
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";
</style>
<style scoped lang="scss">
.phone-modal {
    position: absolute;
    left: calc((750rpx - 686rpx) / 2);
    bottom: 100rpx;
    border-radius: 24rpx;
    width: 686rpx;
    height: 364rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .phone-info {
        margin-top: 20rpx;
        width: 590rpx;
        margin-bottom: 35rpx;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .phone-left {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            color: #000000;
            .phone-text1 {
                font-size: 32rpx;
                line-height: 1;
                font-weight: bold;
                margin-bottom: 20rpx;
            }
            .phone-text2 {
                font-size: 24rpx;
                line-height: 1;
            }
        }
        img {
            width: 124rpx;
            height: 124rpx;
        }
    }
    .phone-btn {
        width: 590rpx;
        height: 100rpx;
        color: #fff;
        background-color: #28c445;
        font-size: 30rpx;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 24rpx;
    }
}
</style>
